
<html>
<head>
    <title>图片裁剪</title>
    <meta name="twitter:" content="" charset="utf-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/cropper/2.3.4/cropper.min.css" rel="stylesheet">
</head>
<body>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">图片裁剪</h3>
        </div>
        <div class="panel-body">
            <div class="col-xs-6 col-xs-offset-2">
                <div >
                    <img style="max-height: 600px;max-width: 750px" id="image" >
                </div>
            </div>
            <div class="col-xs-3">
                <img  id ="img-show" src="" alt="">
            </div>
            <div class="col-xs-6 col-xs-offset-4">
                   <div class="btn-group">
                       <a class="btn btn-primary" href="#">
                           上传文件
                           <input id="input-file-upload" style="position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);" id="file" type="file"   name="files"/>
                       </a>
                       <button class="btn btn-primary btn-left-rotate">左旋转</button>
                       <button class="btn btn-primary " id="btn-getImage">上传图片</button>
                       <button class="btn btn-primary btn-right-rotate">右旋转</button>
                   </div>
            </div>
           <div class="col-xs-12">
               <div class="progress ">
                   <div  id ="progress-fileUp" class="progress-bar  progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" >
                   </div>
               </div>
           </div>
        </div>
        <form   id="uploadForm" enctype="multipart/form-data" action="userFileUp" method="post">
            <input type="hidden" name="id" value="">
        </form>
        <div id="example" class="modal hide fade in" >
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>这是一个模态框标题</h3>
            </div>
            <div class="modal-body">
                <h4>模态框中的文本</h4>
                <p>你可以在这添加一些文本。</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success">唤醒活动</a>
                <a href="#" class="btn" data-dismiss="modal">关闭</a>
            </div>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/2.3.4/cropper.min.js"></script>
<script type="text/javascript" src="FileUpLoad.js"></script>
<script type="text/javascript" >
    $(function () {
        FileUpLoad.init({
            initImage:"",
            container:$('#image'),
            previewContainer:$("#img-show"),
            progress:$("#progress-fileUp"),
            leftBtn:$(".btn-left-rotate"),
            rightBtn:$(".btn-right-rotate"),
            subBtn:$("#btn-getImage"),
            subUrl:"../modify",
            FormData:$('#uploadForm')[0],
            subSuccessCallBack:function (res) {
                console.log(res);
            },
            subErrorCallBack:function (res) {
                console.log(res);
            }
        })
    })
</script>


</html>
